import React, { Component } from 'react'
import { Route } from 'react-router-dom'
import Detail from './Detail'

export default class Message extends Component {
  state = {
    list: [
      { id: 1, title: 'message1', con: '消息内容1' },
      { id: 2, title: 'message2', con: '消息内容2' },
      { id: 3, title: 'message3', con: '消息内容3' }
    ]
  }

  pushRoute = (obj) => {
    // const { id, title, con } = obj
    // 方式一，params 导航
    // this.props.history.push(`/home/message/detail/${id}/${title}/${con}`)
    // 方式二，search 导航
    // this.props.history.push(
    //   `/home/message/detail?id=${id}&title=${title}&con=${con}`
    // )
    // 方式三，state 导航
    this.props.history.push('/home/message/detail', { ...obj })
  }

  replaceRoute = (obj) => {
    // const { id, title, con } = obj
    // 方式一，params 导航
    // this.props.history.replace(`/home/message/detail/${id}/${title}/${con}`)
    // 方式二，search 导航
    // this.props.history.replace(
    //   `/home/message/detail?id=${id}&title=${title}&con=${con}`
    // )
    // 方式三，state 导航
    this.props.history.replace('/home/message/detail', { ...obj })
  }

  render() {
    const { list } = this.state
    console.log('props-->', this.props)
    return (
      <div>
        <ul>
          {list.map((item) => {
            return (
              <li key={item.id}>
                {item.title}
                <button onClick={() => this.pushRoute({ ...item })}>
                  push跳转
                </button>
                <button onClick={() => this.replaceRoute({ ...item })}>
                  replace跳转
                </button>
              </li>
            )
          })}
        </ul>
        {/* 方式一，注册路由 */}
        {/* <Route path="/home/message/detail/:id/:title/:con" component={Detail} /> */}
        {/* 方式二、三，注册路由 */}
        <Route path="/home/message/detail" component={Detail} />
      </div>
    )
  }
}
